import "yuki-createjs/lib/easeljs-0.8.2.combined";
import "yuki-createjs/lib/tweenjs-0.6.2.combined";
class ChessDraw{
    baseLeft=0;
    baseTop=20;
    scale=1080/9;
    stage=null;
    imgs={};
    seleceChess=null;
    isRedClient=true;
    isLock=false;
    ws=null;
    userId=1;
    groupId=1;
    chessBoard=null;
    constructor(stage,ws,imgs,callback){
        this.stage=stage;
        this.imgs=imgs;
        this.ws=ws;
        this.loadImags(callback);
        createjs.Touch.enable(this.stage);
        createjs.Ticker.setFPS(30);
        createjs.Ticker.addEventListener("tick",this.stage);
    }

    setUserId(userId){
        this.userId=userId;
        this.send({type:"get_board"});
    }

    loadImags(callback){
        let i=0;
        let count=Object.keys(this.imgs).length;
        for (const k in this.imgs) {
            let img = new Image();
            img.src = this.imgs[k];
            img.onload = ()=> {
                i++;
                if(callback && i==count){
                    callback(this);
                }
            }
        }

    }

    drowBoard(){
        let chessContainer=new createjs.Container();
        chessContainer.alpha=0.1;
        let chessBg = new createjs.Bitmap(this.imgs.chessBoardBG);
        chessBg.scaleX=chessBg.scaleY=1080/chessBg.image.width;
        chessContainer.addChild(chessBg);
        this.stage.addChild(chessContainer);

        createjs.Tween.get(chessContainer).to({alpha:1}, 500).call(()=>{
          console.log("初始化完成");
          //createjs.Ticker.removeEventListener("tick",this.stage);
        });
    }

    getChessPos(ele){
        let scale=this.scale;
        let xx=ele.x;
        let yy=ele.y;
        if(this.userId==1){
            xx=8-xx;
            yy=9-yy;
        }
        let x=this.baseLeft+xx*scale+scale*0.05;
        let y=this.baseTop+yy*scale+scale*0.05;
        return {x,y};
    }

    drawChess(ele){
        let chess=new createjs.Container();
        let scale=this.scale;
        if(ele.id!=null){
          let chessBg = new createjs.Bitmap(this.imgs.chessImg);
          //console.log("scale",scale);
          chessBg.scaleX=chessBg.scaleY=scale/50*0.9;
          chess.addChild(chessBg);
  
  
          let text = new createjs.Text(ele.text, "6rem Arial", ele.user==1?"#b90206":"#38260e");
          let bound=text.getBounds();
          text.textAlign = "left"
          text.x = scale/2-bound.width/2-0.05*scale;
          text.y = scale/2-bound.height/2;
          
          chess.addChild(text);
        }else{
          let circle = new createjs.Shape();
          circle.graphics.beginFill("#ff0000",0).drawCircle(scale/2,scale/2,scale/2*0.9).endFill();
          chess.alpha=0.01;
          chess.addChild(circle);
        }
  
        let {x,y}=this.getChessPos(ele);
        chess.x=x;
        chess.y=y;
        
        chess.addEventListener("click",(e)=>{
            if(this.userId!=3){//锁定的时候点击无效
                if(this.userId!=this.groupId){
                    console.log("不能操作",this.userId,this.groupId);
                    return;
                }
            }
            let curentChess=e.currentTarget.tergetData;

            if(!this.seleceChess){
                if(this.userId==1 && curentChess.id>=16){
                    return;
                } else if(this.userId==2 && curentChess.id<16){
                    return;
                }
            }
            if(this.seleceChess){//选择过棋子了
                this.drawMoveChess(curentChess);
            }else{//没选择等待下一步
                if(curentChess.id==null){//没棋子的时候
                    return;
                }
                this.drawSelectChess(curentChess);
            }
        });
        this.stage.addChild(chess);
        return chess;
    }

    send(msg){
        msg["userId"]=this.userId;
        this.ws.send(JSON.stringify(msg));
    }
    
    drawMoveChess(ele){
        if(ele.userId){
            ele=this.chessBoard.getChess(ele.to.x,ele.to.y);
        }else{
            this.send({type:"move_chess",from:this.seleceChess.toData(),to:ele.toData()});
        }
        let status=this.seleceChess.moveTo(ele);
        if(status){//移动成功,需要移除之前的元素
            this.stage.removeChild(ele.chess);
        }
        let {x,y}=this.getChessPos(this.seleceChess);
        createjs.Tween.get(this.seleceChess.chess).to({x,y, scaleX:1,scaleY:1,}, 100);
        this.seleceChess=null;
    }

    drawSelectChess(ele){
        if(ele.userId){
            ele=this.chessBoard.getChess(ele.terget.x,ele.terget.y);
        }else{
            this.send({type:"select_chess",terget:ele.toData()});
        }
        let {x,y}=this.getChessPos(ele);
        let conf={x:x-this.scale*.1,y:y-this.scale*.1,scaleX:1.2,scaleY:1.2,};
        this.seleceChess=ele;
        createjs.Tween.get(ele.chess).to(conf, 100);
    }

    onmessage(data){
        if(data.chessInfo){
            this.groupId=data.chessInfo.groupId;
        }
        if(data.type=="join"){
            //this.userId=1; //data.userId;
            this.send({type:"get_board"});
            return;
        }else if(data.type=="re_init_board" || data.type=="re_get_board"){
            this.chessBoard.initializeV2(data);
            return;
        }
        
        if(data.userId==this.userId){//拦截自己发出的
            return;
        }
        console.log("接收",data);
        if(data.type=="re_select_chess"){
            this.drawSelectChess(data);
        }else if(data.type=="re_move_chess"){
            this.drawMoveChess(data);
        }
    }
}
export default ChessDraw;